<template>

   <div>
       <my-header :pageName="pageName">
           <router-link to="/changePwd" slot="changePwd" class="Btn">修改密码</router-link>
           <span slot="checkOut" class="Btn" @click="checkOut">退出登录</span>
       </my-header>
        <el-container>
        
        <el-container>
            <el-aside class="el-aside menu" width="200px">
                <ul class="el-menu">
                    <router-link class="el-menu-item" tag="li" to="/admin/search">查询</router-link>
                    <router-link class="el-menu-item" tag="li" to="/admin/upload" v-if="this.isAdmin">上传</router-link>
                    <router-link class="el-menu-item" tag="li" to="/admin/user" v-if="this.isAdmin">用户</router-link>
                </ul>
            </el-aside>
                
                
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
   </div>
    
    
    

    
</template>

<script>
import Header from "./header"
export default {
    created(){
        let userId=this.$store.state.userId;
        if(userId==="admin"){
            this.isAdmin=true
            this.pageName="管理"
        }
        
    },
    components:{
        myHeader:Header
    },
    data(){
        return{
            isAdmin:false,
            pageName:"查询"

        }
    },
    methods:{
        checkOut(){
            this.$confirm('确认退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.commit("delToken")
            this.$router.push("/login")
        })
      
            
        }
    }
    
};
</script>

<style>
    .header{
        background-color: rgb(64, 158, 255);
    }
    .menu{
        height: 100%;
    }
    .el-menu{
        border-right: 1px solid #e6e6e6;
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
        background-color: #fff;
    }
    .el-menu-item{
        padding-left: 20px;
        font-size: 14px;
        color: #303133;
        transition: border-color .3s,background-color .3s,color .3s;
        box-sizing: border-box;
        height: 56px;
        line-height: 56px;
        padding: 0 20px;
        position: relative;
        -webkit-box-sizing: border-box;
        cursor: pointer;
        white-space: nowrap;
    }
    .is-active{
        color: #409eff
    }
    .Btn{
        text-decoration: none;
        color: #fff; 
        font-size: 14px;
        cursor: pointer;
         float: right;
         height: 100%;
        line-height: 400%;
        margin-right: 20px
    }
</style>

